import { Text, View } from '@tarojs/components';
import { Button, Divider } from '@nutui/nutui-react-taro';
import Taro from '@tarojs/taro';
import "./MovieCard.scss";
import MovieDateBar from './MovieDateBar';



type cinemaMovieData = {
    desc: string; // 电影时长|类型|主演
    id: number; // 电影ID
    img: string; // 电影图片
    nm: string; // 电影名称
    dur: number; // 电影时长
    sc: string;// 电影评分
    shows: {
        showDate: string; // 上映日期
        plist: {
            discountSellPrice: string; // 售票价;
            dt: string; // 场次时间;
            lang: string; // 语言;
            th: string; // 放映厅;
            tm: string; // 开场时间;
            tp: string; // 放映类型2D/3D;
            vipPrice: string; // 会员价;
            vipPriceName: string; // 会员价名称;
        }[];//上映场次;
    }[];
};

type MovieCardProps = {
    cinemaMovieData: cinemaMovieData;
};

const MovieCard = ({ cinemaMovieData }: MovieCardProps) => {
    console.log(cinemaMovieData);


    const { id, img, nm, sc, dur, desc, shows } = cinemaMovieData;

    const handleClick = (MovieId: number) => {
        Taro.navigateTo({
            url: `/pages/detail/detail?id=${MovieId}`,
        });
    };

    return (
        <View className='movieCardContainer'>
            <View className='movieCardContainer-titleContainer' >
                <Text style={{ fontSize: "24px", fontWeight: "bold" }}>{nm}</Text>
                {Number(sc) !== 0 ? <Text style={{ color: "orange" }}><Text style={{ fontSize: "24px", fontWeight: "500" }}>{sc}</Text>分</Text> : <Text style={{ color: "gray" }}>暂无评分</Text>}
            </View>
            <Text>{desc}</Text>
            <Button style={{ color: "red", marginTop: "10px", outline: "1px red solid", textDecoration: "1px" }} onClick={() => handleClick(id)}>点击查看更多影片详情</Button>
            <Divider />
            <MovieDateBar shows={shows} dur={dur} />

        </View>
    );
};

export default MovieCard;
